<!-- 空调遥控器 -->
<template>
  <div class="remote-control">
    <!-- 救生圈 哈哈哈哈 -->
    <div class="big">
      <div class="small"></div>
      <div class="ten-one"></div>
      <div class="ten-two"></div>
    </div>

    <!-- 半圆环 -->
    <div class="ease">Hello</div>

  </div>
</template>

<script>
export default {
  name: "RemoteControl",
  mounted() {},
  computed: {},
  props: {},
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.remote-control {
  display: flex;

  .big {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: @primary-color;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }

  .small {
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 50%;
  }

  .ten-one {
    width: 10px;
    height: 100px;
    background-color: white;
    position: absolute;
    transform: rotate(45deg);
  }

  .ten-two {
    width: 100px;
    height: 10px;
    background-color: white;
    position: absolute;
    transform: rotate(45deg);
  }

  .ease {
    margin-left: 20px;
    width: 100px;
    height: 100px;
    border: 25px solid;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
    line-height: 50px;
    text-align: center;
    border-top-color: #f4f0e6;
    border-right-color: #d9d9f3;
    border-bottom-color: #ceefe4;
    border-left-color: #9dd3a8;
  }
}
</style>
